<template>
	<view>
		<!-- 面包屑 -->
		<view class="bg-light flex align-center">
			<view
				@click="handleBread({ id: 0 })"
				class="px-2 py-2 text-secondary"
				hover-class="bg-hover-light"
			>
				根目录
			</view>
			<block v-for="(item, index) in dirs" :key="index">
				<view class="py-2">/</view>
				<view
					@click="handleBread(item)"
					class="px-2 py-2 text-secondary"
					hover-class="bg-hover-light"
				>
					{{ item.name }}
				</view>
			</block>
		</view>
		<!-- 列表组件 -->
		<f-list
			v-for="(item, index) in list"
			:key="index"
			:item="item"
			:index="index"
			@click="handleClick(item)"
			:showChecked="false"
		></f-list>
		<view style="height: 115rpx;"></view>
		<!-- 保存按钮 -->
		<view
			class="position-fixed bg-primary flex flex-column justify-center align-center text-white"
			style="bottom: 0;left: 0;right: 0;width: 100%;height: 50px;"
			@click="save"
		>
			选定目录
		</view>
	</view>
</template>

<script>
import fList from '@/components/common/f-list.vue'

export default {
	components: {
		fList
	},
	data() {
		return {
			list: [],
			dirs: [],
			key: ''
		}
	},
	onLoad(e) {
		this.key = e.key
		this.getData()
	},
	computed: {
		checkList() {
			return this.list.filter(item => item.checked)
		},
		getFileID() {
			let len = this.dirs.length
			if (len === 0) {
				return 0
			}
			return this.dirs[len - 1].id
		}
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		formaList(list) {
			return list.map(item => {
				let type = 'none'
				if (item.isdir == 1) {
					type = 'dir'
				} else {
					type = item.ext.split('/')[0] || 'none'
				}
				return {
					type,
					checked: false,
					...item
				}
			})
		},
		getData() {
			this.$H.get(`/file?file_id=${this.getFileID}&isdir=1`, { token: true }).then(res => {
				this.list = res.map(item => {
					item.type = 'dir'
					return item
				})
			})
		},
		save() {
			this.$H
				.post(
					'/share/save',
					{
						dir_id: this.getFileID,
						sharedurl: this.key
					},
					{ token: true }
				)
				.then(res => {
					uni.$emit('updateData', {})
					uni.switchTab({
						url: '../index/index'
					})
				})
		},
		handleClick(item) {
			this.dirs.push({
				id: item.id,
				name: item.name
			})
			this.getData()
		},
		handleBread(item) {
			if (item.id === 0) {
				this.dirs = []
				this.getData()
			} else {
				const i = this.dirs.findIndex(v => v.id === item.id)
				if (i !== -1) {
					this.dirs = this.dirs.filter((v, index) => index <= i)
					this.getData()
				}
			}
		}
	}
}
</script>

<style></style>
